<template>
  <div class="formBox">
    <el-form ref="formRef" :model="formData" :rules="rules"
             label-width="80px" size="large" status-icon>
      <el-form-item label="导出路径" prop="path">
        <el-input v-model.trim="formData.path"  maxlength="255"
                  autocomplete="off"/>
      </el-form-item>
      <el-form-item label="加密密码" prop="password">
        <el-input v-model.trim="formData.password" show-password show-word-limit
                  type="password" maxlength="32"
                  minlength="4" autocomplete="off"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit(formRef)"
                   :disabled="exportBtn.disabled">
          {{exportBtn.name}}
        </el-button>
        <el-button type="info" @click="reset(formRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {reactive, ref} from "vue";
import {useStore} from "vuex";
import {ElMessage} from "element-plus";
import {exportData} from "@/utils/dataPersistence";

export default {
  name: "DataExport",
  setup() {
    const formData = ref({
      path: '',
      password: ''
    });
    const formRef = ref();
    const validatePath = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('路径不能为空'));
      } else if(!/^[A-z]:[/|\\](.+?[/|\\])*(.+?)$/.test(value)){
        callback(new Error('路径不合法'));
      } else{
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'));
      } else if (value.length<4||value.length>32) {
        callback(new Error('密码长度在4到32个字符之间'));
      } else if(!/^[0-9a-zA-Z@#$%^&*]+$/.test(value)){
        callback(new Error('密码只能由数字、大小写字母及特殊字符(@#$%^&*)组成'));
      } else{
        callback();
      }
    };
    const rules=reactive({
      path:[{validator:validatePath,trigger:'blur'}],
      password:[{validator:validatePass,trigger:'blur'}],
    })
    const store=useStore();
    const submit=(formInstance)=>{
      if(!formInstance) return;
      formInstance.validate((valid)=>{
        if (valid) {
          store.dispatch('exportData',{path:formData.value.path,password:formData.value.password})
              .then(res=>{
                ElMessage.success(res);
              }).catch(err=>{
                ElMessage.error(err)
          })
          setEditBtnDisabledTime(10);
        } else {
          ElMessage.error('数据导出失败');
        }
      })
    };
    const reset=(formInstance)=>{
      if(!formInstance) return;
      formInstance.resetFields();
    }
    const exportBtn=ref({
      default:'导出',
      name:'导出',
      disabled:false
    });
    const setEditBtnDisabledTime=(time)=>{
      exportBtn.value.name=time;
      exportBtn.value.disabled=true;
      const timer=setInterval(()=>{
        --exportBtn.value.name;
        if(exportBtn.value.name<0){
          exportBtn.value.name=exportBtn.value.default;
          exportBtn.value.disabled=false;
          clearInterval(timer);
        }
      },1000);
    }
    return {
      formData,
      formRef,
      submit,
      rules,
      reset,
      exportBtn
    }
  }
}
</script>

<style scoped>
.formBox{
  padding-top: 100px;
  padding-left: 10px;
  padding-right: 20px;
}
:deep(.el-form-item--large){
  margin-bottom: 40px !important;
}
:deep(.el-button:not(:first-child)){
  margin-left: 40px !important;
}
:deep(.el-button--primary){
  width: 68px !important;
}
</style>
